<template>
    <section class="Dashboard__container">
        <quick-panel :title="title">
            <div slot="subtitle"><slot name="date"></slot></div>

            <quick-card-list :items="items">
                <template slot-scope="scope">
                    <div class="inflows__container">
                        <span class="num green" v-if="scope.item.value <= 0">{{
                            (scope.item.value / 100).toFixed(2)
                        }}</span>

                        <span v-else class="num red">{{
                            (scope.item.value / 100).toFixed(2)
                        }}</span>
                        <span class="name">{{ scope.item.stock_name }}</span>
                        <span class="code">{{ scope.item.stock_code }}</span>
                        <span class="tag">
                            <i
                                v-if="scope.item.value <= 0"
                                class="iconfont icon-shujuxiajiangqushixiadie"
                            />

                            <i v-else class="iconfont icon-shujushangshengqushizhangfu" />
                        </span>
                    </div>
                </template>
            </quick-card-list>
        </quick-panel>
    </section>
</template>

<script>
import InFlows from "./InFlows.vue";
export default {
    components: { InFlows },
    props: {
        title: {
            type: String,
        },
        items: {
            type: Array,
            default: () => [],
        },
    },
};
</script>

<style lang="scss" scoped>
.inflows__container {
    height: 100px;
    width: 160px;
    padding: 10px 20px 10px 20px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: 0 0 10px #ebebeb;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    .num {
        font-size: 3rem;

        font-weight: 700;
        position: relative;
        &::after {
            content: "亿";
            font-size: 1.4rem;
            color: coral;
            position: absolute;
            font-weight: 700;
            right: -20px;
        }
    }

    .num_red {
        font-size: 3rem;

        font-weight: 700;
    }

    .green {
        color: #16a085;
    }

    .red {
        color: #c0392b;
    }

    .name {
        font-size: 1.5rem;
        color: #999;
        margin-top: 20px;
    }

    .code {
        font-size: 1.2rem;
        color: #999;
        margin-top: 10px;
    }

    .tag {
        position: absolute;
        right: 10px;
        bottom: 10px;
        .iconfont {
            color: #999;
        }
    }
}
</style>
